<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>旅游立即购买</title>  
    <link rel="stylesheet" href="../libs/mui/mui.css" />
	<link rel="stylesheet" href="../libs/iconfont/fonts/iconfont.css"/>
	<link rel="stylesheet" type="text/css" href="../css/main.css"/>
	<link href="../libs/time/mui.picker.min.css" rel="stylesheet" />
	<style>				
		/*图片*/
		.mui-content{font-size: 16px;}
		b{color: #ff043f;}
		.mui-table-view-cell>a:not(.mui-btn){white-space:normal}
		.mui-table-view .mui-media-object {max-width: 95px;height: 80px;}
		.mui-media-body b{color: #aaa;font-size: 14px;padding: 5px 0;display: block;}
		.mui-input-row label{width: 25%;}
		.mui-input-row label~input{width: 75%;}	
		
		.mui-grid-view.mui-grid-9{background: white;border: none;}
		.mui-grid-view.mui-grid-9 .mui-media{border: none;border-bottom: 1px solid #efeff4;padding: 11px 0px;}
		/*弹窗*/
        .popover{display:none;background-color: rgba(0,0,0,.3);position:fixed;top:0;bottom: 0;right: 0;left: 0;z-index: 99;}
        .mui-btn.mui-btn-block{padding-bottom: 10px;padding-top:10px}
        .mui-btn-block:nth-child(1){border-radius: 5px 5px 0 0;margin-bottom: 0;border:0;}
        .mui-btn-block:nth-child(2){margin: 0;}
        .mui-btn-block:nth-child(3){border:0;border-radius: 0 0 5px 5px;}
        .mui-btn-block:nth-child(4){border-radius: 5px;border:none !important;}
        .btn{display: none;position:fixed;z-index: 99;width:90%;left: 5%;right: 5%;bottom: 20px;}
        .btn>.mui-btn-block{color:#39acff;}
        .travel li{
        	height: 45px;
        }
        
         /*支付密码弹窗 start*/
			
			.password-of-pay-wraper {
			  display: none;
			  width: 80%;
			  height: 180px;
			  background-color: #fff;
			  position: fixed;
			  left: 10%;
			  top: 50%;
			  margin-top: -90px;
			  border-radius: 5px;
			  z-index: 1002;
			}
			
			#password_backdrop {
			  position: fixed;
			  z-index: 999;
			  top: 0;
			  right: 0;
			  bottom: 0;
			  left: 0;
			  -webkit-transition-duration: 400ms;
			  -moz-transition-duration: 400ms;
			  transition-duration: 400ms;
			  opacity: 1;
			  -webkit-opacity: 1;
			  -moz-opacity: 1;
			  -khtml-opacity: 1;
			  filter: alpha(opacity=100);
			  background: rgba(0, 0, 0, .4);
			  display: none;
			}
			
			.password-of-pay-top {
			  width: 100%;
			  height: 35px;
			  line-height: 35px;
			  text-align: center;
			  color: #757575;
			  border-bottom: 1px solid #e1e1e1;
			  position: relative;
			}
			
			.password-of-pay-top .close-btn {
			  width: 28px;
			  height: 28px;
			  line-height: 28px;
			  text-align: center;
			  position: absolute;
			  top: 4px;
			  left: 10px;
			  font-size: 16px;
			}
			
			.password-of-pay-body {
			  width: 100%;
			  padding-top: 40px;
			}
			
			.password-of-pay-body form {
			  width: 210px;
			  background-color: #f30;
			  margin: 0 auto;
			  position: relative;
			}
			
			.password-of-pay-body input[type="password"] {
			  float: left;
			  width: 35px;
			  height: 35px;
			  line-height: 35px;
			  text-align: center;
			  font-size: 24px;
			  padding: 0;
			  margin: 0;
			  border-radius: 0;
			}
			
			.password-of-pay-body form input[type="password"]+ input[type="password"] {
			  border-left: 0;
			}
			
			
			/*支付密码弹窗 end*/ 	
	</style>
</head>
<body>	
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">立即购买</h1>
	</header>	
	<!--底部导航-->
	<nav class="navtab mui-bar mui-bar-tab">
		<div></div>
		<div class="mui-col-xs-8 mui-pull-left combined">
			<span>合计：￥<b class="money goods_total">0.00</b></span>							
		</div>
		<div class="mui-col-xs-4 mui-pull-right Good">
			<a>
				<span>提交订单</span>
			</a>
		</div>
	</nav>
	<div class="mui-content">
		<div class="shopping">
			<ul class="mui-table-view Travel">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left pic" src="">
						<div class="mui-media-body">
							<div class="mui-ellipsis-2 title"></div>
							<b>￥<span class="price"></span></b>
						</div>
					</a>
				</li>
			</ul>		
			<ul class="mui-table-view m3">
				<li class="mui-table-view-cell">
					<span>出行类型：<span class="spec"></span></span>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-input-row mui-navigate-right">
					<label>日期：</label>
					<input type="text" id="result" data-options='{"type":"date","beginYear":2017,"endYear":2048}'  class="btns" placeholder="请选择出行日期"/>
				</li>
			</ul>
			<ul class="mui-table-view m3">
				<li class="mui-table-view-cell">
					<a class="conten">
						<i class="mui-icon iconfont ify5">&#xe601;</i>
						<span>添加出行人</span>
					</a>
				</li>
			</ul>
			<ul class="mui-table-view mui-grid-view mui-grid-9 travel">
				<!--<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">权志龙</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">成人</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-5 mui-col-sm-5 mui-ellipsis">441************1569</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">
					<i class="iconfont ify7">&#xe610;</i>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">宋民国</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">学生</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-5 mui-col-sm-5 mui-ellipsis">441************1569</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">
					<i class="iconfont ify7">&#xe610;</i>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">小晰宝</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">成人</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-5 mui-col-sm-5 mui-ellipsis">441************1569</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">
					<i class="iconfont ify7">&#xe610;</i>
				</li>-->
			</ul>
			<ul class="mui-table-view m5">
				<li class="mui-input-row">
					<label id="W35">联系方式：</label>
					<input id="W65" type="number" class="order_phone" placeholder="请输入联系方式"/>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-input-row">
					<label>备注：</label>
					<input type="text" class="remarks" placeholder="选填：对本次交易的说明"/>
				</li>
			</ul>
		</div>
	</div>	
	<!--弹窗-->
	<div class="popover"></div>
	<div class="btn" id="j_payway_form">
		<button type="button" class="mui-btn  mui-btn-block payment" payment_code="balance" pay_sn="" order_id="">余额支付</button>
		<button type="button" class="mui-btn  mui-btn-block payment" payment_code="alipay" pay_sn="" order_id="">支付宝支付</button>
		<button type="button" class="mui-btn  mui-btn-block payment" payment_code="wxpay"  pay_sn="" order_id="">微信支付</button>
		<button type="button" class="mui-btn  mui-btn-block off">取消</button>
	</div>
	<!--/*支付密码弹窗 start*/-->
	<div class="password-of-pay-wraper" id="j_password_of_pay">
		<div class="password-of-pay-top">
			<p>请输入支付密码</p>
			<div class="close-btn" id="j_close_tn">X</div>
		</div>
		<div class="password-of-pay-body">
			<form action="#" class="mui-clearfix">
				<input type="password" id="pwd1" maxlength="1" />
				<input type="password" id="pwd2" maxlength="1" />
				<input type="password" id="pwd3" maxlength="1" />
				<input type="password" id="pwd4" maxlength="1" />
				<input type="password" id="pwd5" maxlength="1" />
				<input type="password" id="pwd6" maxlength="1" />
			</form>		
		</div>
	</div>
	<div id="password_backdrop"></div>
		<!--弹窗-->
</body>
<script src="../js/mui.js"></script>
<script src="../js/open.js"></script>
<script src="../libs/jquery/jquery.js"></script>
<script src="../js/appconfig.js"></script>
<script type="text/javascript" src="../libs/time/mui.picker.min.js"></script>
<script type="text/javascript" src="../js/web_js/public.js"></script>
<script type="text/javascript" src="../js/web_js/Travel_goods.js"></script>
<script type="text/javascript" src="../js/web_js/pay.js"></script>
<script>
	(function($) {
		$.init();
		var result = $('#result')[0];
		var btns = $('.btns');
		btns.each(function(i, btn) {
			btn.addEventListener('tap', function() {
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				/*
				 * 首次显示时实例化组件
				 * 示例为了简洁，将 options 放在了按钮的 dom 上
				 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
				 */
				var picker = new $.DtPicker(options);
				picker.show(function(rs) {
					/*
					 * rs.value 拼合后的 value
					 * rs.text 拼合后的 text
					 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
					 * rs.m 月，用法同年
					 * rs.d 日，用法同年
					 * rs.h 时，用法同年
					 * rs.i 分（minutes 的第二个字母），用法同年
					 */
					result.value = rs.text; 
					/* 
					 * 返回 false 可以阻止选择框的关闭
					 * return false;
					 */
					/*
					 * 释放组件资源，释放后将将不能再操作组件
					 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
					 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
					 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
					 */
					picker.dispose();
				});
			}, false);
		});
	})(mui);
</script>
<script>
	//	旅行详情
	$(".Travel").on('tap',function(){
		openNewPage('Travel_details.html');
	})
//	$('.Good').on('tap',function(){
//		$('.popover').show();
//		$('.btn').slideDown()
//	});
	$('.off').on('tap',function(){
		$('.popover').fadeOut();
		$('.btn').slideUp()
		toast('已取消付款，订单已生成！');
		
	});
	//点击支付密码弹窗的"关闭"按钮所处理业务
		$("#j_close_tn").on("tap",function (){
			toast("取消支付,订单已生成！");
			$("#j_password_of_pay").hide();
			tool.shade().hide();
			$('.popover').fadeOut();
			$('#password_backdrop').css("display","none");
		});
</script>
</html>